import { Button } from 'antd-mobile'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { clearData } from '../../store/modules/user'

function Index() {
  const user=useSelector(state=>state.user.userInfo)
  const avator = user.avator || '/public/th.jpg'
  const navigate=useNavigate()
  const dispatch=useDispatch()
  const goOut=()=>{
     dispatch(clearData())
   
  }
  return (
    <div style={{width:'100%',height:'100vh',display:'flex',justifyContent:'center',alignItems:'center'}}>
      {
         user.avator ? <div>
           <h4>用户名:{user.username}</h4>
       <img src={avator} alt=""  width={50} height={50}/>
       <Button onClick={goOut}>退出</Button>
         </div>: <div>
           <Button onClick={ ()=>navigate('/login')}>未登录,请先登录</Button>
         </div>
      }
       
    </div>
  )
}

export default Index
